<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :modal="true"
      top="10vh"
      width="400px"
      @closed="closed"
    >
      <el-form ref="sceneSrcForms" :model="sceneSrcForm" :rules="rules">

        <el-form-item label-width="80px" label="上级"  v-if="sceneSrcForm.parentId!='0'">
          <treeselect v-model="sceneSrcForm.parentId"
          noOptionsText="无数据."
          noResultsText="无数据."
          noChildrenText="无数据."
          :normalizer="normalizer"
          placeholder="请选择..."
          :options="srcTreeOptions" style="width:15.625rem;" />
        </el-form-item>

        <el-form-item label-width="80px" label="名称" prop="name">
          <el-input v-model="sceneSrcForm.name" placeholder="请输入名称" autocomplete="off" style="width:15.625rem;"  />
        </el-form-item>

        <el-form-item label-width="80px" label="标识" prop="code">
          <el-input v-model="sceneSrcForm.code" placeholder="请输入标识" autocomplete="off" style="width:15.625rem;"  />
        </el-form-item>

        <el-form-item label-width="80px" label="类型" prop="type" v-if="!isEdit && sceneSrcForm.parentId!='0' "   >
            <el-select v-model="sceneSrcForm.type" placeholder="请选择" style="width:15.625rem;"   >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label-width="80px" label="序号" prop="sort">
          <el-input-number v-model="sceneSrcForm.sort" :min="0" :max="1000" label="请输入序号" style="width:15.625rem;"  />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveSceneSrc,
  getSceneSrcTree
} from '@/api/51world/sceneSrc.js'

import {
  isOk
} from '@/utils/request'

  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'


export default {
  name: 'InfoDialog',
  components: {
    Treeselect
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    },
    sceneId: {
      type: String,
      default: ''
    },
    handleType: {
      type: String,
      default: ''
    },
    parentId: {
      type: String,
      default: ''
    },
    grandParentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      title: '',
      isEdit:false,
      buttonLoading: false,
      sceneSrcForm: {
        id: '',
        sceneId: '',
        parentId: '',
        name: '',
        code:'',
        type: '',
        sort: 0
      },
      options: [],
      srcTreeOptions:[],
      displayOptions:[{
          value: 0,
          label: '隐藏'
        }, {
          value: 1,
          label: '显示'
      }],
      ctrlOptions:[{
         value: 0,
         label: '否'
      }, {
         value: 1,
         label: '是'
      }],
      rules: {
        name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ],
          type: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {

  },
  watch: {
    dialogVisible: {
      handler: function(value) {
        this.visible = value
      },
      immediate: true,
      deep: false
    },
    handleType: {
      handler: function(nValue) {
      },
      immediate: true,
      deep: false
    },
    sceneId: {
      handler: function(nValue) {
        this.sceneSrcForm.sceneId=nValue;
      },
      immediate: true,
      deep: false
    },
    dialogData: {
      handler: function(nValue) {
        if (nValue) {
          this.sceneSrcForm.id = nValue.id || ''
          if(nValue.sceneId) this.sceneSrcForm.sceneId = nValue.sceneId
          this.sceneSrcForm.parentId = nValue.parentId || '0'
          this.sceneSrcForm.name = nValue.name || ''
          this.sceneSrcForm.code = nValue.code || ''
          this.sceneSrcForm.type = nValue.type || ''
          this.sceneSrcForm.sort = nValue.sort || 1
        }

        this.options= [{
            value: 'FOLDER',
            label: '目录'
          }, {
            value: 'POI_GROUP',
            label: 'POI'
          }, {
            value: 'RANGE_GROUP',
            label: '区域'
          }, {
            value: 'PATH_GROUP',
            label: '路径'
        }, {
            value: 'CUSTOM_GROUP',
            label: '聚合'
        }]

        if(this.sceneSrcForm.id){
          this.title = '编辑'
          this.isEdit=true;
        }else{
          this.isEdit=false;
          this.title = '新增'
          if('SCENE'==this.type ){
            this.options= [{
              value: 'FOLDER',
              label: '目录'
            }]
          }
        }

      },
      immediate: true,
      deep: false
    },
    parentId: {
      handler: function(nValue) {
        if (nValue) {
          this.sceneSrcForm.parentId = nValue
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  created() {
    this.getSceneSrcTree();
  },
  methods: {
    normalizer(node){
        //去掉children=[]的children属性
        if(node.children && !node.children.length){
            delete node.children;
        }
        return {
            id: node.id,
            label:node.name,
            children:node.children
        }
    },
    getSceneSrcTree(){
      this.loading=true
      getSceneSrcTree({
        parentId:'0',
      }).then(response => {
        this.loading=false
        if(isOk(response)){
          this.srcTreeOptions=response.data;
        }
      }).catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.loading = false
      })
    },
    indexMethod(index) {
      return index +1;
    },
    submitForm: function() {
      this.$refs.sceneSrcForms.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          saveSceneSrc(this.sceneSrcForm).then(rsp => {
            if (isOk(rsp)) {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
              this.buttonLoading = false
              this.closed()
              if (this.sceneSrcForm.parentId === '0') {
                this.$emit('refreshAll')
              } else {
                this.$emit('refresh', this.sceneSrcForm.parentId, this.grandParentId)
              }
            }
          })
        }
      })
    },
    closed: function() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
